<template>
  <div class="dashboard-container">
    <div v-loading="downloadLoadingZ" class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>用户管理</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('user-tong')" @click="getHRCompany">同步用户数据</el-button>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.name" type="text" placeholder="输入手机号码" />
        </el-col>
        <el-col :span="4">
          <el-select v-model.number="query.aid" :placeholder="$t('table.selectThe')+'类型'" clearable @clear="() => { query.aid=undefined } ">
            <el-option v-for="(item,index) in practiceType" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="550px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" fixed />
        <el-table-column label="昵称" prop="username" fixed width="140" />
        <el-table-column :label="$t('table.portrait')" prop="headimg">
          <template slot-scope="{row}">
            <div class="table-img"><img :src="row.avatar" style="width: 100%;"></div>
          </template>
        </el-table-column>
        <el-table-column label="账号类型" prop="utype" width="140">
          <template slot-scope="{row}">
            {{ row.utype|utypeType }}
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" width="130" />
        <el-table-column label="邮箱" prop="email" width="180" />
        <el-table-column label="状态" prop="status" width="100">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|statusType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="注册时间" prop="reg_time" width="160">
          <template slot-scope="{row}">
            {{ row.reg_time|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column label="注册IP" prop="reg_ip" width="180" />
        <el-table-column label="注册地址" prop="reg_address" width="200" />
        <el-table-column label="最后登入时间" prop="last_login_time" width="160">
          <template slot-scope="{row}">
            {{ row.last_login_time|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column label="最后登入地址" prop="last_login_address" width="200" />
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>

  </div>
</template>
<script>
import { GetMemberList, GetHRMember, GetHRMemberBind } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        4: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      practiceType: [
        { id: 1, name: '企业账号' },
        { id: 2, name: '求职账号' }
      ],
      isFile: true,
      activeName: '1',
      list: [],
      showSettings: false,
      downloadLoading: false,
      query: {
        page: 1,
        aid: undefined,
        limit: 10,
        name: ''
      },
      count: 0,
      downloadLoadingZ: false
    }
  },
  created() {
    // 获取userid
    this.getUserAdmin()
  },
  methods: {
    // 获取同步企业数据
    async getHRCompany() {
      try {
        await this.$confirm('确定同步数据吗？')
        this.downloadLoadingZ = true
        await GetHRMember()
        this.getCateGory()
      } catch (error) {
        this.downloadLoadingZ = false
      }
    },
    async getCateGory() {
      try {
        await GetHRMemberBind()
        this.downloadLoadingZ = false
        this.$message.success('同步成功！')
      } catch (error) {
        this.downloadLoadingZ = false
        this.$message.error('失败！')
      }
    },
    // 获取管理员列表
    async getUserAdmin() {
      this.downloadLoading = true
      const { count, list } = await GetMemberList(this.query)
      this.list = list
      this.count = count
      this.downloadLoading = false
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getUserAdmin()
    },
    // 点击展开新增修改
    addAdminOpen(row) {
      this.getAttestationInfo(row)
      this.$refs.panel.show = !this.$refs.panel.show
    },

    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getUserAdmin()
    }
  }
})
</script>

<style scoped lang="scss">
.table-img{
  width: 80px;
}
.shopOrder-dialog{
  height: auto;
  max-height: 600px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.base{
  padding: 20px 30px;
  display: flex;
  .logo{
    width: 118px;
    height: 118px;
    margin-right: 20px;
    background-color: #ebeef5;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    img{
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
  .info{
    flex: 1;
    .title{
      padding: 5px 0 18px;
      display: flex;
      .name{
        font-size: 20px;
        height: 20px;
        color: #303033;
        font-weight: 600;
        margin-right: 10px;
      }
      .user{
        padding-top: 6px;
        font-size: 14px;
        font-weight: 400;
        line-height: 14px;
        color: #777;
        .logoin{
          color: #0078ff;
          cursor: pointer;
        }
      }
      .qcc_box{
        width: 63px;
        height: 20px;
        position: absolute;
        right: 30px;
        z-index: 30;
        cursor: pointer;
        a{
          cursor: pointer;
          color: inherit;
          text-decoration: none;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .details{
      max-width: 100%;
      .line{
        margin-bottom: 15px;
        .line_label{
          color: #777;
          font-size: 14px;
          line-height: 14px;
          font-weight: 400;
        }
        .text{
          display: inline-block;
          font-size: 14px;
          line-height: 14px;
        }
        .text_color{
          color: #0078ff;
          cursor: pointer;
        }
      }
    }
  }
}
.bind_icon{
  display: inline-block;
  float: left;
  margin-right: 5px;
}
.tab_box{
  padding:0 30px;
}
.clientInfo_wrapper{
  height: calc(100vh - 246px);
    overflow-y: auto;
}
.tables{
  padding: 20px 0px;
}
  .title_t{
    font-weight: 700;
    font-size: 16px;
    margin-left: 20px;
  }
  .table_content{
    margin-top: 30px;
  }
  .img_box{
    margin-top: 30px;
  }
</style>
